<template>
  <Menu mode="inline" :defaultSelectedKeys="['/']" style="height: 100%; border-right: 0"
    @click="handleMenuClick" :inline-collapsed="collapsed">
    <!-- 首页 -->
    <Menu.Item key="/">
      <template #icon>
        <HomeOutlined />
      </template>
      <span class="menu-text">首页</span>
    </Menu.Item>

    <!-- 文章 -->
    <Menu.SubMenu key="articles" title="文章">
      <template #icon>
        <BookOutlined />
      </template>
      <Menu.Item key="/all-articles">全部文章</Menu.Item>
      <Menu.Item key="/latest-articles">最新文章</Menu.Item>
    </Menu.SubMenu>

    <!-- 分类 -->
    <Menu.SubMenu key="categories" title="分类">
      <template #icon>
        <TagOutlined />
      </template>
      <Spin v-if="categoriesLoading" />
      <template v-else-if="categoriesError">
        <div class="menu-error">{{ categoriesError }}</div>
      </template>
      <template v-else-if="categories.length === 0">
        <div class="menu-empty">暂无分类</div>
      </template>
      <template v-else>
        <Menu.Item v-for="category in categories" :key="`/category/${category.id}`">
          {{ category.name }}
        </Menu.Item>
      </template>
    </Menu.SubMenu>

    <!-- 标签 -->
    <Menu.SubMenu key="tags" title="标签">
      <template #icon>
        <TagOutlined />
      </template>
      <Spin v-if="tagsLoading" />
      <template v-else-if="tagsError">
        <div class="menu-error">{{ tagsError }}</div>
      </template>
      <template v-else-if="tags.length === 0">
        <div class="menu-empty">暂无标签</div>
      </template>
      <template v-else>
        <Menu.Item v-for="tag in tags" :key="`/tag/${tag.id}`">
          {{ tag.name }}
        </Menu.Item>
      </template>
    </Menu.SubMenu>

    <!-- 个人介绍 -->
    <Menu.Item key="/about">
      <template #icon>
        <ProfileOutlined />
      </template>
      <span class="menu-text">个人介绍</span>
    </Menu.Item>
  </Menu>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Menu, Spin } from 'ant-design-vue'
import { HomeOutlined, BookOutlined, TagOutlined, ProfileOutlined } from '@ant-design/icons-vue'
import { useBlogStore } from '../stores/blog'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()

// 使用 Pinia store
const blogStore = useBlogStore()

// 响应式数据
const categories = computed(() => blogStore.cachedCategories.filter(cat => cat.showInNav))
const tags = computed(() => blogStore.cachedTags.filter(tag => tag.showInNav))
const categoriesLoading = computed(() => blogStore.isCategoriesLoading)
const tagsLoading = computed(() => blogStore.isTagsLoading)
const categoriesError = ref('')
const tagsError = ref('')

// 获取分类列表
const fetchCategories = async () => {
  categoriesError.value = ''
  
  try {
    await blogStore.getCategories()
  } catch (error) {
    console.error('获取分类列表失败:', error)
    categoriesError.value = '获取分类列表失败，请稍后重试'
  }
}

// 获取标签列表
const fetchTags = async () => {
  tagsError.value = ''
  
  try {
    await blogStore.getTags()
  } catch (error) {
    console.error('获取标签列表失败:', error)
    tagsError.value = '获取标签列表失败，请稍后重试'
  }
}

// 处理菜单点击事件
const handleMenuClick = (item) => {
  // 检查是否是有效的路由路径
  if (item.key && item.key.startsWith('/')) {
    router.push(item.key)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCategories()
  fetchTags()
})
</script>

<style scoped>
.menu-error {
  color: #ff4d4f;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.menu-empty {
  color: #999;
  padding: 8px 16px;
  font-size: 0.9rem;
  text-align: center;
}

:deep(.ant-menu-item) {
  transition: all 0.3s ease;
}

:deep(.ant-menu-item:hover) {
  background-color: rgba(24, 144, 255, 0.1);
}

:deep(.ant-menu-item-selected) {
  background-color: #1890ff !important;
  color: white !important;
}

:deep(.ant-menu-submenu-title:hover) {
  color: #1890ff;
}

:deep(.ant-spin) {
  margin: 10px auto;
  display: block;
}
</style>